<template>
  <div>
    <el-tree-select ref="treeSelect" v-model="values" :select-params="selectParams" :tree-params="treeParams" :tree-render-fun="_renderFun" @select-clear="selectClear" @searchFun="_searchFun" @node-click="_nodeClickFun" />
  </div>
</template>

<script>
export default {
  props: {
    treeData: {
      type: Array,
      default: () => [],
      required: true
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      values: this.multiple ? [] : '',
      selectParams: {
        multiple: this.multiple,
        clearable: true,
        placeholder: '请选择'
      },
      treeParams: {
        clickParent: true,
        filterable: true,
        'check-strictly': true,
        'default-expand-all': false,
        'expand-on-click-node': false,
        data: [], // 赋值
        props: {
          children: 'child',
          label: 'name',
          disabled: 'disabled',
          value: 'id'
        }
      }
    }
  },
  mounted() {
    this.treeParams.data = this.treeData
    this.$refs.treeSelect.treeDataUpdateFun(this.treeData)
  },
  methods: {
    // 树点击
    _nodeClickFun() {
      this.$emit('handleSave', this.values)
    },
    // 树清空
    selectClear() {
      this.multiple ? (this.values = []) : (this.values = '')
      this.$emit('handleSave', this.values)
    },
    // 树过滤
    _searchFun(value) {
      // 自行判断 是走后台查询，还是前端过滤
      // this.$refs.treeSelect.$refs.tree.filter(value);
      this.$refs.treeSelect.filterFun(value)
      // 后台查询
      // this.$refs.treeSelect.treeDataUpdateFun(treeData);
    },
    // 自定义render
    _renderFun(h, { node }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
        </span>
      )
    }
  }
}
</script>
